import _ from 'lodash';
import { onMounted, onUnmounted } from 'vue';

/**
 * 监听窗口大小，根据目标尺寸进行缩放
 * @param option
 */
export default function useScalePage(option: {
  targetX: number,
  targetY: number
}) {

const resize = _.throttle(changeScale, 100)

onMounted(()=>{
  // 1. 初始时候调用一次
  resize()
  // 2.后边每次改变窗口大小都会走这里
  window.addEventListener('resize', resize)
})

onUnmounted(()=>{
  window.removeEventListener('resize', resize)
})

function changeScale(){
  const targetX = option.targetX || 1920
  const targetY = option.targetY || 1080
  const cuWidth = window.document.documentElement.clientWidth || document.body.clientWidth
  const cuHeight = window.document.documentElement.clientHeight || document.body.clientHeight
  const scaleRatioX = cuWidth / targetX
  const scaleRatioY = cuHeight / targetY
  let scaleRatio = 1
  if(scaleRatioX === scaleRatioY){
    scaleRatio = scaleRatioX
  }else{
    scaleRatio = scaleRatioX < scaleRatioY ? scaleRatioX : scaleRatioY
  }
  console.log('scaleRatio: ', scaleRatio);
  // document.body.style.transform = `scale(${scaleRatio}) translateX(-50%)`
  // document.body.style.left = `50%`
  document.body.setAttribute('style', `transform: scale(${scaleRatio}) translateX(-50%); position: relative; left: 50%;`)
}
}